<template>
	<view class="bg-white">
		<!-- 状态栏 -->
		<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
		<view class="myheader padding-sm font-sub-title">
			<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
			修改密码
		</view>
		<view class="cu-list menu sm-border" >
			<view class="cu-item bg-white" >
				<view class="content" v-if="role=='user'">
					<text class="margin-right font-normal">{{user.NAME}} {{user.SEX=='1'?'男':'女'}}</text>
					<text class="margin-right font-small">{{user.CITY}}{{user.DISCTRICT}}</text>
				</view>
				<view class="content" v-else>
					<text class="margin-right font-normal">{{user.NAME}}({{user.POSITION}})</text>
					<text class="margin-right font-small">{{user.HOSPITAL_NAME}}</text>
				</view>
			</view>
			<view class="cu-item bg-white" style="height: 80rpx;min-height: 80rpx;">
				<view class="content">
					<view>
						<text class="margin-right font-normal text-light-gray" >手机号</text>
						<text class="margin-right font-normal">{{phone}}</text>
					</view>
				</view>
				<view>
					<button class="cu-btn theme-blue-bg font-normal code-btn" @tap="getCode()">{{showcount ? count + 's' : '获取验证码'}}</button>
				</view>
			</view>
			<view class="cu-item bg-white">
				<view class="main">
					<view class="login-group">
						<input class="login-input font-normal"  v-model="code" type="number" placeholder="手机验证码" name="input"></input>
					</view>
					<view class="login-group">
						<input class="login-input font-normal"  v-model="password" placeholder="密码" :password="!showPassword"></input>
						<image
							class="img cuIcon" 
							:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'" 
							@tap="showPass"
						></image>
					</view>
					<view class="text-center"><button class="cu-btn login-btn font-normal" @tap="save()">修 改</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import checkUtil from '@/utils/checkUtil.js'
	import md5 from '@/common/lib/md5.min.js'
	import _config from '@/config/index.js'
	import Vue from 'vue'
	var that;
	export default {
		data() {
			return {
				phone:'',
				code: '',
				password: '',
				statusBarHeight:Vue.prototype.StatusBar,
				showPassword:false,
				showcount:false,
				timer: '',
				count: '', // 倒计时
				role:uni.getStorageSync("role"),
				user:'',
			}
		},
		onLoad(){
			that = this;
			this.user = uni.getStorageSync("userInfo")
			this.phone = this.user.PHONE
		},
		onShow(){
			this.timer = uni.getStorageSync('resetTimer')||null;
			this.count = uni.getStorageSync('resetCount')||'';
			this.showcount =  uni.getStorageSync('resetShowcount')||false
			if(!this.timer){
				this.timer = setInterval(() => {
				
			       if (this.count > 0) {
			
			         this.count--;
					 uni.setStorageSync('resetCount',this.count);
			        } else {
			
			          this.showcount = false;
					 uni.setStorageSync('resetShowcount',false)
			         clearInterval(this.timer);
					 uni.removeStorageSync('resetTimer')
			         this.timer = null;
			
			        }
			
			       }, 1000)
			}
		},
		methods: {
			getCode(){
				if(!checkUtil.checkPhone(this.phone)){
					uni.showToast({
						"title":"请输入正确的手机号",
						"position":"bottom",
						"icon":"none"
					})
					return;
				}
				if(this.showcount){
					return;
				}
				uni.showLoading({
					"title":"验证码发送中..."
				})
			    const TIME_COUNT = 60;
				this.$http.getSMSCode(
				{
					phone:that.phone
				}).then((res) => {
					uni.hideLoading()
					if(res.code==1){
						uni.showToast({
							title:"验证码发送成功",
							position:"bottom",
							icon:"none"
						})
						if (!this.timer) {
						
						       this.count = TIME_COUNT;
						
						       this.showcount = true;
							   uni.setStorageSync('resetShowcount',true)
						       this.timer = setInterval(() => {
						
						       if (this.count > 0 && this.count <= TIME_COUNT) {
						
						         this.count--;
								 uni.setStorageSync('resetCount',this.count);
						        } else {
						
						          this.showcount = false;
						         uni.setStorageSync('resetShowcount',false)
						         clearInterval(this.timer);
						         uni.removeStorageSync('resetTimer')
						         this.timer = null;
						
						        }
						
						       }, 1000)
						
						      }
					}else{
						uni.showToast({
							title:res.message,
							position:"bottom",
							icon:"none"
						})
					}
				})
			},
			back(){
				uni.navigateBack();
			},
			save(){
				if(this.password==''){
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请输入密码'
					});
					return;
				}
				if(this.code.length!=4){
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请输入4位验证码'
					});
					return;
				}

				this.$http.changePwd({
					phone:that.phone,
					code:that.code,
					password:md5(that.password)
				}).then((res)=>{
					if(res.code==1){
						uni.request({
							url:_config.serverUrl+'/u/modifyUserInfo',
							method:'POST',
							data:{
								username:that.phone,
								password:md5(that.password),
								nickname:''
							},
							dataType:"json",
							success(result){
								if(result.data.status==200){
									
									uni.request({
										url:_config.serverUrl+'/u/modifyUserInfo',
										method:'POST',
										data:{
											username:that.phone+'med',
											password:md5(that.password),
											nickname:''
										},
										dataType:"json",
										success(result){
											console.log(result)
											uni.showToast({
												icon: 'none',
												position: 'bottom',
												title: '修改成功，请重新登录'
											});
											uni.setStorageSync("loginInfo",{
												"phone":that.phone,
												"password":that.password,
												"loginType":"1"
											});
											setTimeout(function(){
												that.$store.dispatch('logout')
												uni.reLaunch({
													url: '/pages/login/login'
												})
											})
										},
										fail(err) {
											uni.showToast({
												icon: 'none',
												position: 'bottom',
												title: '密码重置失败，请重试'
											});
										}
									})
								
								}else{
									uni.showToast({
										icon: 'none',
										position: 'bottom',
										title: '密码重置失败，请重试'
									});
								}
							},
							fail(err) {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: '密码重置失败，请重试'
								});
							}
						})
					}else{
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: res.message
						});
					}
				})
				
			},
			showPass(){
				//是否显示密码
				this.showPassword = !this.showPassword
			},
		}
	}
</script>

<style scoped>
.theme-blue-bg {
	background-color: #427EE3!important;
	color: #fff;
	border-radius: 0;
}
.main {
	width: 100%;
}
.login-btn {
	border-radius: 0;
	background-color: #427EE3!important;
	color: #fff;
	width: 100%;
	height: 80rpx;
	margin-top:30rpx;
}
.code-btn{
	width: 220rpx!important;
	height: 80rpx!important;
}
.login-input{
	width:680rpx ;
}
.login-group{
	margin: 0 auto;
	background-color: #ffffff;
	padding: 1px 14px;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	min-height: 48px;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	border-bottom: 0.5px solid #ddd;
	min-height: 33px;
	width: 100%;
	height: 80rpx;
}
.img{
	width: 32upx;
	height: 53upx;
	font-size: 32upx;
}
.content{
	padding: 1px 14px;
}
</style>
